<template>
  <div class="ne-container">
    <!-- 筛选条件区域 -->
    <div class="filter-container">
      <div class="filter-row">
        <div class="name-input">
          <van-field
            v-model="name"
            placeholder="请输入姓名"
            clearable
            @clear="search"
          />
        </div>
        <div class="type-dropdown">
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="talentType"
              :options="talentTypeOptions"
              @change="search"
            />
          </van-dropdown-menu>
        </div>
        <div class="search-btn">
          <van-button
            size="normal"
            type="primary"
            @click="search"
            class="custom-btn"
            >搜索</van-button
          >
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-container">
      <doctor-card
        v-for="item in dataSource"
        :key="item.indexCode"
        :row="item"
        @success="search"
        :talentTypeOptions="talentTypeOptions"
      />

      <van-empty v-if="!dataSource.length" description="暂无数据" />
    </div>
  </div>
</template>

<script>
import DoctorCard from './components/DoctorCard.vue'
import pagingMixin from '../../mixins/pagingMixin'
export default {
  name: 'wx_pages_zhfw_doctorResource',
  components: { DoctorCard },
  mixins: [pagingMixin],
  data() {
    return {
      talentList: [],
      restfulApi: '/tbTalentDatabase/page',
      talentType: '',
      name: '',
      talentTypeOptions: [{ text: '全部', value: '' }],
    }
  },
  mounted() {
    this.getTalentTypes()
    this.search()
  },
  methods: {
    // 获取达人类型选项
    getTalentTypes() {
      this.$http
        .post('/tbDict/list', {
          dictType: 'talent_type',
        })
        .then((res) => {
          if (res.code === '0' && res.data && res.data.length) {
            // 将接口返回的数据转换为下拉选项格式
            const options = res.data.map((item) => ({
              text: item.dictValue,
              value: item.dictKey,
            }))

            // 添加"全部"选项
            this.talentTypeOptions = [{ text: '全部', value: '' }, ...options]
          }
        })
        .catch((err) => {
          console.error('获取达人类型失败', err)
        })
    },

    search() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }

      if (this.talentType) {
        params.talentType = this.talentType
      }

      if (this.name) {
        params.talentName = this.name
      }

      this.$http.post(this.restfulApi, params).then((res) => {
        if (res.code === '0') {
          this.dataSource = res.data.list || []
          this.total = res.data.total || 0
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.ne-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.filter-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-container {
  margin-top: 58px; /* 筛选条件高度 + padding */
  flex: 1;
  overflow-y: auto;
}

.filter-row {
  display: flex;
  align-items: center;
}

.name-input {
  flex: 3;
  margin-right: 10px;
  border: 1px solid #e5e5e5;
  height: 38px;
}

.name-input :deep(.van-field__control) {
  height: 38px;
  min-height: 38px;
}
.name-input :deep(.van-cell) {
  padding: 7px 16px;
}

.type-dropdown {
  flex: 1.2;
  margin-right: 10px;
  border: 1px solid #e5e5e5;
  height: 38px;
  &::v-deep {
    .van-dropdown-menu__bar {
      height: 38px;
      box-shadow: none;
    }
    .van-dropdown-menu__title {
      line-height: 38px;
    }
  }
}

.search-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 38px;
}

.custom-btn {
  height: 38px;
  line-height: 38px;
  border-radius: 4px;
  font-size: 14px;
}

/* 移除不需要的样式 */
.filter-item {
  margin-bottom: 0;
}

.label {
  display: none;
}
</style>
